import React, { Component } from 'react';
import { Link, Redirect } from 'react-router-dom'
import {
    Form,
    Icon,
    Input,
    Button,
    Checkbox,
    message
} from 'antd';

import './login.less'
import { login } from '../../api/index'
import storageUtils from '../../utils/storageUtils'
import memoryUtils from '../../utils/memoryUtils'

class Login extends Component {
    handleSubmit = (e) => {
        // 收集表单输入数据  
        e.preventDefault();
        this.props.form.validateFields(async (err, values) => {
            if (!err) {
                const { username, password } = values
                const res = await login(username, password)
                if (res.code === 0) {
                    message.success('操作成功')
                    // this.props.histoty.push('/')
                    const user = res.data
                    // 在内存中保存user
                    memoryUtils.user = user
                    // 在本地浏览器存储中保存user
                    storageUtils.save({key: 'user', value: user})
                    // 跳转到主页面
                    this.props.history.replace('/home')
                } else {
                    message.success(res.msg)
                }
            }
        })
    }
    render () {
        // 如果用户已经登录，自动跳转到管理主页面
        const { user } = memoryUtils
        if (user && user.id) {
            return <Redirect to='/home' /> 
        }

        const {form: { getFieldDecorator }} = this.props;
        return (
            <section className='login'>
                <header className="login_header">
                    <section className='login_header_left'>
                        <h1>某某公共资源管理平台</h1>
                    </section>
                    <section className='login_header_right'>
                        <p>在线客服</p>
                        <p>版本更新</p>
                    </section>
                </header>
                <section className='login_main'>
                    <section className="form">
                        <Form onSubmit={this.handleSubmit} className="login-form">
                            <h1 className='login_title'>用户登录</h1>
                            <Form.Item>
                                {
                                    getFieldDecorator('username', {
                                        // 声明式验证：直接使用别人定义好的验证方式
                                        rules: [
                                            { required: true, whitespace: true, message: '请输入用户' },
                                            { pattern: /^[a-zA-Z0-9]/, message: '用户名必须是英文大小写、数字组成' }
                                        ],
                                    })(
                                        <Input
                                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                            placeholder="用户名"
                                            size='large'
                                        />
                                    )
                                }
                            </Form.Item>
                            <Form.Item>
                                {
                                    getFieldDecorator('password', {
                                        rules: [
                                            { required: true, message: '请输入密码' },
                                            { min: 3, message: '密码长度最少三位' }
                                        ]
                                    })(
                                        <Input
                                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                            type="password"
                                            placeholder="密码"
                                            size='large'
                                        />
                                    )
                                }
                            </Form.Item>
                            <Form.Item>
                                <Checkbox>记住密码</Checkbox>
                                <Link to='http://www.baidu.com'>
                                    忘记密码
                                </Link>
                                <Button type="primary"  size='large' htmlType="submit" block className="login-form-button">
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </section>
                </section>
                <footer className='login_footer'>
                    <ul>
                        <li>
                            关于我们
                        </li>
                        <li>
                            法律声明及隐私权政策
                        </li>
                        <li>
                            联系我们
                        </li>
                        <li>
                            加入我们
                        </li>
                    </ul>
                    <p className='copyright'>
                        © 2009-2018 zhangjianling.com 版权所有：思维空间技术博客版权所有 甘公网安备 33010002000
                    </p>
                </footer>
            </section>
        );
    }
}

/**
 * 高阶函数/高阶组件 
 */
const WarpLogin = Form.create()(Login)

export default WarpLogin;